.add-device {
    min-height: 100vh;
    background: #f8f9fa;

    .pageHeader {
        text-align: center;
        display: flex;
        flex-direction: column;
        gap: 44rpx;

        .h5 {
            font-size: 32rpx;
            line-height: 1em;
        }

        .h2 {
            font-size: 48rpx;
            line-height: 1em;
        }
    }

    .pageBody {
        padding: 44rpx 96rpx;
    }

    .map {
        position: relative;
        border-radius: 20rpx;
        overflow: hidden;

        &::after {
            background: rgba(0, 122, 255, .5);
            display: block;
            content: '';
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            // pointer-events: none;
        }

        .myMap {
            width: 100%;
        }

        .marker {
            position: absolute;
            z-index: 9;
            width: 80rpx;
            height: 80rpx;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(calc(-100% + 20rpx));

            .image {
                width: 80rpx;
                height: 80rpx;
            }
        }
    }

    .buttonArea {
        padding-top: 100rpx;
        display: flex;
        justify-content: center;
    }

    .sector {
        padding: 24rpx;
        font-size: 24rpx;

        .secHeader {
            display: flex;
            justify-content: space-between;
            padding-bottom: 24rpx;

            .title {
                font-size: 32rpx;
            }

            .add,
            .confirm {
                display: flex;
                flex-direction: column-reverse;
            }

            .add {
                color: #058aff;
            }
        }

        .secSearch {
            background: #F7F7F9;
            color: #808080;
            height: 50rpx;
            line-height: 50rpx;
            display: flex;
            gap: 10rpx;
            padding: 0 20rpx;
            border-radius: 25rpx;

            .inputBox {
                flex-grow: 1;
            }
        }

        .secList {
            padding: 34rpx 0;
            display: flex;
            flex-direction: column;

            .item {
                display: flex;
                justify-content: space-between;
                padding: 17rpx 0;
            }

            .iconfont {
                color: #16c46a;
                display: none;

                &.show {
                    display: block;
                }
            }
        }
    }

    .loading {
        display: flex;
        justify-content: center;

        .box {
            width: 208rpx;
            height: 208rpx;
            position: relative;

            .circle {
                animation: spin 1.5s linear infinite,
                    hue 6s linear infinite;
                position: relative;

                .image {
                    width: 208rpx;
                    height: 208rpx;
                }
            }

            .text {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateX(-50%) translateY(-50%);
            }
        }
    }
}

.largeIcon {
    display: flex;
    justify-content: center;
}

.iconCircle {
    width: 296rpx;
    height: 296rpx;
    background: linear-gradient(135deg, #385fc1, #2789e7);
    border-radius: 50%;
    transform: translateZ(0);
    animation: bounce 0.8s cubic-bezier(0.68, -0.55, 0.27, 1.5),
        twist 1.2s cubic-bezier(0.25, 1.5, 0.5, 1) 0.8s;
    box-shadow: 0 10px 20px rgba(5, 138, 255, .5);
    position: relative;

    .smallIcon {
        position: absolute;
        width: 96rpx;
        height: 96rpx;
        left: 50%;
        top: 50%;
        transform: translateX(-50%) translateY(-50%);

        .line {
            width: 8rpx;
            height: 96rpx;
            position: absolute;
            overflow: hidden;
            left: calc(50% - 4px);
            top: 0;
            border-radius: 4rpx;

            &.line1 {
                transform: rotate(45deg);
            }

            &.line2 {
                transform: rotate(-45deg);
            }

            &::before {
                width: 100%;
                height: 0;
                content: '';
                display: block;
                background: #fff;
                animation: draw .4s linear 1.8s forwards;
            }

            &.line2::before {
                animation-delay: 2.2s;
            }
        }

        &.success {

            left: calc(50% + 8rpx);
            top: calc(50% - 20rpx);

            .line1 {
                height: 40rpx;
                /* 缩短第一条线长度 */
                left: 30%;
                /* 左偏移调整 */
                top: 75%;
                /* 垂直居中 */
                transform: rotate(-55deg) translateY(-50%);
            }

            .line2 {
                height: 70rpx;
                /* 加长第二条线 */
                left: 28%;
                /* 右偏移调整 */
                top: 62%;
                /* 下移 */
                transform: rotate(225deg) translateY(50%);
                /* 更陡的角度 */
            }
        }
    }

    &.red {
        background: linear-gradient(135deg, #f84043, #ff4d4f);
        box-shadow: 0 10px 20px rgba(255, 77, 79, .5);
    }
}
.reason{
    color: #555557;
}
.step1 {
    padding-top: 200rpx;
    padding-bottom: 100rpx
}

.showMore {
    padding: 34rpx 0;
    display: flex;
    justify-content: space-between;

    .more {
        font-size: 24rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        color: #adb5bd;
    }
}

.h1 {
    font-size: 72rpx;
    line-height: 1em;
    padding: 60rpx;
    color: #2885e4;
}
.red{
    color: #ff4d4f;
}
.connecting {
    padding-top: 30rpx;
}
.buttonsArea{
    padding-top: 88rpx;
    display: flex;
    justify-content: center;
    gap: 60rpx;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

@keyframes draw {
    0% {
        height: 0;
    }

    100% {
        height: 100%;
    }
}

@keyframes hue {
    0% {
        filter: hue-rotate(0);
    }

    50% {
        filter: hue-rotate(42deg);
    }

    100% {
        filter: hue-rotate(0);
    }
}

/* 弹跳阶段 */
@keyframes bounce {
    0% {
        transform: scale(0);
        opacity: 0;
    }

    30% {
        transform: scale(1.5) translateY(-30%);
    }

    50% {
        transform: scale(0.9) translateY(15%);
    }

    70% {
        transform: scale(1.1) translateY(-10%);
    }

    90% {
        transform: scale(0.98) translateY(5%);
    }

    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* 扭曲阶段 */
@keyframes twist {

    0%,
    100% {
        transform: skew(0) rotate(0) translateX(0);
    }

    20% {
        transform: skew(15deg, -8deg) rotate(12deg) translateX(-10px);
        /* X/Y轴双向扭曲 */
        border-radius: 45% 55% 40% 60%;
        /* 形状变形 */
    }

    40% {
        transform: skew(-12deg, 10deg) rotate(-10deg) translateX(10px);
        border-radius: 35% 65% 55% 45%;
    }

    60% {
        transform: skew(8deg, -5deg) rotate(6deg) translateX(-10px);
        border-radius: 50% 50% 40% 60%;
    }

    80% {
        transform: skew(-5deg, 3deg) rotate(-3deg) translateX(10px);
        border-radius: 47% 53% 48% 52%;
    }
}